<template>
  <el-container class="setting-center_mall-shop-setting_shop-initialize">
    <el-main>
      <div class="wrapper-box">
        <div class="dis">
          <div class="user-center-mobile">
            <template v-for="(moduleItem,moduleIndex) in moduleList">
              <div :key="moduleIndex">
                <!--顶部导航栏-->
                <template v-if="moduleItem.dataField.key === 'topNavBar' && moduleItem.dataField.isShow">
                  <div :class="{active:currentPanel === 'topNavBar'}" @click="currentPanel = 'topNavBar'" class="pos_r user-center-item">
                      <div class="pos_r ab-mobile-header-top" :style="{
                      backgroundColor:moduleItem.dataField.style === '2' ? moduleItem.dataField.globalBackColor : '#fff',
                      color:moduleItem.dataField.style === '2' && moduleItem.dataField.colorSetting === 1 ? moduleItem.dataField.backColor : moduleItem.dataField.globalContentColor
                      }" :class="{active:moduleItem.dataField.style === '2' && moduleItem.dataField.colorSetting === 1}">
                      <div class="ab-mobile-header-page-name">{{moduleItem.dataField.title}}</div>
                    </div>
                  </div>
                </template>
                <!--用户头像-->
                <template v-if="moduleItem.dataField.key === 'head' && moduleItem.dataField.isShow">
                  <div :class="{active:currentPanel === 'head'}" @click="currentPanel = 'head'" class="pos_r user-center-item user-avatar">
                    <div class="user-info-header" :style="{
                      backgroundColor:moduleItem.dataField.boxBackgroundColor,
                      backgroundImage:moduleItem.dataField.boxBackgroundStyle === '1' ? 'url('+moduleItem.dataField.boxBackgroundImage+')' : '',
                      paddingTop:moduleItem.dataField.paddingTop+'px',
                      paddingBottom:moduleItem.dataField.paddingBottom+'px',
                    }">
                      <div class="header-content" :style="{backgroundImage:'url('+moduleItem.dataField.styleImage+')'}">
                        <div class="user-info" :class="'user-align-'+moduleItem.dataField.headerAlign" >
                          <div v-if="moduleItem.dataField.headerAlign ==='right'"></div>
                          <div class="dis user-info-content">
                            <div>
                              <img src="@/assets/commons/default-avatar.png" class="member-photo">
                            </div>
                            <div class="user-name">
                              <div class="member-nick-name font_w" :style="{color:moduleItem.dataField.levelBackgroundColor}">用户名称</div>
                              <div v-if="moduleItem.dataField.isShowPhone === 1" :style="{color:moduleItem.dataField.levelBackgroundColor}">188*****888</div>
                            </div>
                          </div>
                        </div>
                        <div>
                          <div v-if="moduleItem.dataField.isShowCardNumber === 1"  :style="{color:moduleItem.dataField.levelBackgroundColor}"><span>CZ322365626</span></div>
                        </div>
                        <div v-if="moduleItem.dataField.isShowCode === 1 || moduleItem.dataField.isShowCardNumber === 1" class="user-code">
                          <i v-if="moduleItem.dataField.isShowCode === 1" class="iconfont icon-erweima"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <!--订单信息-->
                <template v-if="moduleItem.dataField.key === 'order' && moduleItem.dataField.isShow  && moduleItem.dataField.item.find(item=>item.isShow)">
                  <div :class="{active:currentPanel === 'order'}" @click="currentPanel = 'order'" class="pos_r user-center-item">
                    <div class="user-center-order">
                      <div class="order-header dis al_item dis_ju_spb">
                        <div>基础设置</div>
                      </div>
                      <div class="dis al_item order-box">
                        <template v-for="(orderItem,orderIndex) in moduleItem.dataField.item">
                          <div v-if="orderItem.isShow" :key="orderIndex" class="flex_1 text-center">
                            <svg class="icon-size" aria-hidden="true">
                              <use :xlink:href=orderItem.icon.url></use>
                            </svg>
                            <div class="order-content-t">{{ orderItem.title }}</div>
                          </div>
                        </template>
                      </div>
                    </div>
                  </div>
                </template>
                <!--用户资产-->
                <template v-if="moduleItem.dataField.key === 'asset' && moduleItem.dataField.isShow && moduleItem.dataField.item.find(item=>item.isShow)">
                  <div :class="{active:currentPanel === 'asset'}" @click="currentPanel = 'asset'" class="pos_r user-center-item user-center-order">
                    <div class="order-header dis al_item dis_ju_spb">
                      <div>我的资产</div>
                    </div>
                    <div class="dis al_item order-box">
                      <template v-for="(assetItem,assetIndex) in moduleItem.dataField.item">
                        <div v-if="assetItem.isShow" :key="assetIndex" class="flex_1 text-center">
                          <svg class="icon-size" aria-hidden="true">
                            <use :xlink:href=assetItem.icon.url></use>
                          </svg>
                          <div class="asset-content-t">{{ assetItem.title }}</div>
                        </div>
                      </template>
                    </div>
                  </div>
                </template>
                <!--图片导航1-->
                <template v-if="moduleItem.dataField.key === 'imageMenu' && moduleItem.dataField.isShow && moduleItem.dataField.item && moduleItem.dataField.item.length>0">
                  <div :class="{active:currentPanel === 'imageMenu'}" @click="currentPanel = 'imageMenu'">
                    <div class="user-center-image"  v-for="(imageItem,imageIndex) in moduleItem.dataField.item" :key="imageIndex" :style="{backgroundImage: `url(${imageItem.url})`}"></div>
                  </div>
                </template>
                <!--菜单-->
                <template v-if="moduleItem.dataField.key === 'menu' && moduleItem.dataField.isShow">
                  <div :class="{active:currentPanel === 'menu'}" @click="currentPanel = 'menu'" class="pos_r user-center-item">
                    <div class="user-center-menu">
                      <!-- 列表  -->
                      <template v-if="moduleItem.dataField.style === '1'">
                        <template v-for="(menuItem,menuIndex) in moduleItem.dataField.item">
                          <div v-if="menuItem.isShow" class="dis al_item dis_ju_spb menu-item" :class="{'need-gap':moduleItem.dataField.needGap}" :key="menuIndex">
                            <div class="dis al_item">
                              <svg class="icon-size" aria-hidden="true">
                                <use :xlink:href=menuItem.icon.url></use>
                              </svg>
                              <div style="padding-left: 10px;margin-top: 8px;">{{ menuItem.title }}</div>
                            </div>
                            <span class="el-icon-arrow-right"></span>
                          </div>
                        </template>
                      </template>
                      <!-- 宫格 -->
                      <template v-else>
                        <div style="background: #fff;padding-bottom: 10px">
                          <div class="dis al_item flex_w">
                            <template v-for="(menuItem,menuIndex) in moduleItem.dataField.item.filter(it=>it.isShow)">
                              <div v-if="menuIndex<=7" :key="menuIndex" class="menu-ga dis al_item dis_ju text-center">
                                <div>
                                  <!-- <svg-icon class-name="menu-icon" :icon-class="menuItem.icon.url"></svg-icon> -->
                                  <svg class="icon-size" aria-hidden="true">
                                    <use :xlink:href=menuItem.icon.url></use>
                                  </svg>
                                  <div>{{ menuItem.title }}</div>
                                </div>
                              </div>
                            </template>
                          </div>
                          <template v-if="moduleItem.dataField.item.filter(it=>it.isShow) && moduleItem.dataField.item.filter(it=>it.isShow).length>8">
                          <div class="pos_r menu-line"></div>
                          </template>
                        </div>
                      </template>
                    </div>
                  </div>
                </template>
                <!-- 关于系统 -->
                <template v-if="moduleItem.dataField.key === 'level' && moduleItem.dataField.isShow && moduleItem.dataField.item.find(item=>item.isShow)">
                  <div :class="{active:currentPanel === 'level'}" @click="currentPanel = 'level'" class="pos_r user-center-item user-center-order">
                    <div class="order-header dis al_item dis_ju_spb">
                      <div>关于系统</div>
                    </div>
                    <div class="dis al_item order-box">
                      <template v-for="(levelItem,levelIndex) in moduleItem.dataField.item">
                        <div v-if="levelItem.isShow" :key="levelIndex" class="flex_1 text-center">
                          <svg class="icon-size" aria-hidden="true">
                            <use :xlink:href=levelItem.icon.url></use>
                          </svg>
                          <div class="asset-content-t">{{ levelItem.title }}</div>
                        </div>
                      </template>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </div>
            <!-- 右侧设置 -->
          <div class="flex_1 user-right-mobile">
            <div class="user-center-config">
              <div class="user-center-content">
                <div class="panel-items">
                  <draggable :list="moduleList" :move="dragOnMove" handle=".handle" ghost-class="ghost" filter=".forbid">
                    <div v-for="(item,index) in moduleList" :key="index" class="panel-item">
                      <div class="dis al_item dis_ju_spb panel-header">
                        <div class="dis flex_1 al_item">
                          <el-checkbox :disabled="item.dataField.disabled" v-model="item.dataField.isShow"></el-checkbox>
                          <div class="flex_1" @click="handlerClickModule(item)">{{ item.dataField.moduleName }}</div>
                        </div>
                        <div v-if="item.dataField.key !== 'topNavBar'" class="drag-right handle">
                          <img src="@/assets/images/jiantou.png" class="img-box"/>
                          <!-- svg-icon icon-class="drag-right"></svg-icon -->
                        </div>
                      </div>
                      <div v-if="item.dataField.key === currentPanel" class="panel-container">
                        <!--顶部导航栏-->
                        <template v-if="item.dataField.key === 'topNavBar'">
                          <el-form ref="form" :model="item.dataField" label-width="80px">
                            <el-form-item class="person-center-form-item" label="页面名称">
                              <el-input style="width: 320px" show-word-limit size="mini" maxlength="8" v-model="item.dataField.title"
                              ></el-input>
                            </el-form-item>
                            <el-form-item class="person-center-form-item" label="页面描述">
                              <el-input style="width: 320px"  type="textarea" show-word-limit size="mini" maxlength="24" v-model="item.dataField.desc"></el-input>
                            </el-form-item>
                            <!-- <el-form-item class="person-center-form-item" label="背景颜色">
                              <div class="nav-style person-center-form-item">
                                <el-radio-group v-model="item.dataField.style">
                                  <el-radio label="1">跟随全局</el-radio>
                                  <el-radio label="2">自定义</el-radio>
                                </el-radio-group>
                              </div>
                              <div v-if="item.dataField.style === '1'">顶部色系与
                                <el-button style="font-size: 12px" type="text">店铺风格-顶部色系</el-button>
                                处保持一致
                              </div>
                              <div v-else class="dis al_item">
                                <div>
                                  <div class="bar-title">背景颜色</div>
                                  <div>
                                    <el-color-picker v-model="item.dataField.globalBackColor"></el-color-picker>
                                  </div>
                                </div>
                                <div style="margin-left: 80px">
                                  <div class="bar-title">内容颜色</div>
                                  <div class="dis al_item" style="height: 52px">
                                    <div class="dis al_item dis_ju content-color-item"
                                         @click="item.dataField.colorSetting = 1"
                                    ><i v-if="item.dataField.colorSetting === 1" class="el-icon-check"></i></div>
                                    <div class="dis al_item dis_ju content-color-item ba"
                                         @click="item.dataField.colorSetting = 2"
                                    ><i v-if="item.dataField.colorSetting === 2" class="el-icon-check"></i></div>
                                  </div>
                                </div>
                              </div>
                            </el-form-item> -->
                          </el-form>
                        </template>
                        <!--用户头像-->
                        <template v-if="item.dataField.key === 'head'">
                          <el-form ref="form" :model="item.dataField" label-width="100px">
                            <el-form-item class="person-center-form-item" label="头部样式">
                              <el-radio-group v-model="item.dataField.style" disabled="false">
                                <el-radio label="1">样式1</el-radio>
                                <el-radio label="2">样式2</el-radio>
                                <el-radio label="3">样式3</el-radio>
                                <el-radio label="4">样式4</el-radio>
                              </el-radio-group>
                            </el-form-item>
                            <!-- <el-form-item class="person-center-form-item" label="上边距">
                              <div class="dis al_item dis_ju_spb">
                                <div></div>
                                <div>
                                  <el-radio-group v-model="item.dataField.paddingTop" size="small">
                                    <el-radio-button :label="10">小</el-radio-button>
                                    <el-radio-button :label="20">中</el-radio-button>
                                    <el-radio-button :label="30">大</el-radio-button>
                                  </el-radio-group>
                                </div>
                              </div>
                            </el-form-item>
                            <el-form-item class="person-center-form-item" label="下边距">
                              <div class="dis al_item dis_ju_spb">
                                <div></div>
                                <div>
                                  <el-radio-group v-model="item.dataField.paddingBottom" size="small">
                                    <el-radio-button :label="10">小</el-radio-button>
                                    <el-radio-button :label="20">中</el-radio-button>
                                    <el-radio-button :label="30">大</el-radio-button>
                                  </el-radio-group>
                                </div>
                              </div>
                            </el-form-item> -->
                            <el-form-item class="person-center-form-item" label="背景图像">
                              <div>
                                <el-radio-group v-model="item.dataField.boxBackgroundStyle">
                                  <el-radio label="1">图片</el-radio>
                                  <el-radio label="2">纯色</el-radio>
                                </el-radio-group>
                              </div>
                              <div v-if="item.dataField.boxBackgroundStyle === '2'">
                                <el-color-picker v-model="item.dataField.boxBackgroundColor"></el-color-picker>
                              </div>
                              <div v-if="item.dataField.boxBackgroundStyle === '1'" class="head-edit-box">
                                <div class="dis al_item">
                                  <div class="image-box" :style="{backgroundImage: `url(${item.dataField.boxBackgroundImage})`}"></div>
                                  <el-button @click="choiceClick(index)">重新选择</el-button>
                                </div>
                                <div class="color-9797A1">建议尺寸750px*310px</div>
                              </div>
                            </el-form-item>
                            <el-form-item class="person-center-form-item" label="个人头像位置">
                              <div class="dis al_item dis_ju_spb">
                                <div></div>
                                <div>
                                  <el-radio-group v-model="item.dataField.headerAlign">
                                    <el-radio label="left">居左</el-radio>
                                    <el-radio label="center">居中</el-radio>
                                    <el-radio label="right">居右</el-radio>
                                  </el-radio-group>
                                </div>
                              </div>
                            </el-form-item>
                            <el-form-item class="person-center-form-item" label="个人信息颜色">
                              <div class="dis al_item dis_ju_spb">
                                <div></div>
                                <div>
                                  <el-color-picker v-model="item.dataField.levelBackgroundColor"></el-color-picker>
                                </div>
                              </div>
                            </el-form-item>
                            <el-form-item v-for="(la,laI) in [
                            {key:'isShowPhone',label:'显示用户电话'},
                            {key:'isShowCode',label:'显示二维码'},
                            {key:'isShowCardNumber',label:'显示员工号'},
                            ]" :key="laI" class="person-center-form-item" :label="la.label"
                            >
                              <div class="dis al_item dis_ju_spb">
                                <div></div>
                                <div>
                                  <el-radio-group v-model="item.dataField[la.key]" size="small">
                                    <el-radio-button :label="itemValue.key" v-for="(itemValue,indexValue) in showOrHider" :key="indexValue">{{ itemValue.title }}</el-radio-button>
                                  </el-radio-group>
                                </div>
                              </div>
                            </el-form-item>
                          </el-form>
                        </template>
                        <!--用户资产-->
                        <template v-if="item.dataField.key === 'asset'">
                          <div class="menu-items">
                            <draggable :list="item.dataField.item">
                              <div v-for="(meItem,meIndex) in item.dataField.item" :key="meIndex" class="dis al_item dis_ju_spb menu-item">
                                <div class="dis al_item">
                                  <el-checkbox v-model="meItem.isShow"></el-checkbox>
                                  <div class="flex_1">{{ meItem.title }}</div>
                                </div>
                                <i class="el-icon-edit-outline cursor" @click="handlerEdit(meItem,meIndex,index)"></i>
                              </div>
                            </draggable>
                          </div>
                        </template>
                        <!--订单信息-->
                        <template v-if="item.dataField.key === 'order'">
                          <div class="text-center">
                            <div class="menu-items">
                              <draggable :list="item.dataField.item">
                              <div v-for="(meItem,meIndex) in item.dataField.item" :key="meIndex" class="dis al_item dis_ju_spb menu-item">
                                <div class="dis al_item">
                                  <el-checkbox v-model="meItem.isShow"></el-checkbox>
                                  <div class="flex_1">{{ meItem.title }}</div>
                                </div>
                                <i class="el-icon-edit-outline cursor" @click="handlerEdit(meItem,meIndex,index)"></i>
                              </div>
                              </draggable>
                            </div>
                          </div>
                        </template>
                        <!--图片导航-->
                        <template v-if="item.dataField.key === 'imageMenu'">
                          <draggable :list="item.dataField.item">
                          <div v-for="(imageItem,imageIndex) in item.dataField.item" :key="imageIndex" class="dis al_item image-menu-container">
                            <i class="el-icon-error" @click="imageClick(index,imageIndex)"></i>
                            <div class="image-menu-image" :style="{backgroundImage:`url(${imageItem.url})`}"  @click="changeImg(index,imageIndex)"></div>
                            <div class="flex_1 image-menu">
                              <div class="dis al_item">
                                <el-input placeholder="请输入图片标题" show-word-limit size="mini" maxlength="12" v-model="imageItem.title"></el-input>
                              </div>
                              <div class="dis al_item">
                                <div v-if="imageItem.link.type >= 0&&imageItem.link.title&&imageItem.link.microTitle" class="dis al_item">
                                  <span class="typeName">{{ imageItem.link.microTitle }}</span>
                                  <span class="microTitle">{{ imageItem.link.title }}</span>
                                  <span class="cursor modifyBtn microTitle" @click="choosePage(index,imageIndex)">修改</span>
                                </div>
                                <div v-else class="cursor modifyBtn" @click="choosePage(index,imageIndex,imageItem.link)">请选择跳转路径</div>
                                <!-- <el-button class="image-link-button" type="text">请选择跳转路径</el-button> -->
                              </div>
                            </div>
                          </div>
                          </draggable>
                          <div v-if="item.dataField.item.length<10" class="add-nav-item" @click="handleAddImageMenu(item.dataField.item)">添加导航 <span v-if="item.dataField.item.length>0">({{ item.dataField.item.length }}/10)</span></div>
                        </template>
                        <!--功能菜单-->
                        <template v-if="item.dataField.key === 'menu'">
                          <el-form ref="form" :model="item.dataField" label-width="80px">
                            <el-form-item class="person-center-form-item" label="样式">
                              <el-radio-group v-model="item.dataField.style">
                                <el-radio label="1">列表式</el-radio>
                                <el-radio label="2">宫格式</el-radio>
                              </el-radio-group>
                              <div v-if="item.dataField.style === '1'">
                                <el-checkbox v-model="item.dataField.needGap">插入间隔</el-checkbox>
                              </div>
                            </el-form-item>
                            <el-form-item class="person-center-form-item" label="显示设置">
                              <div class="menu-items">
                                <draggable :list="item.dataField.item">
                                <div v-for="(meItem,meIndex) in item.dataField.item" :key="meIndex" class="dis al_item dis_ju_spb menu-item">
                                  <div class="dis al_item">
                                    <el-checkbox v-model="meItem.isShow"></el-checkbox>
                                    <div class="flex_1">{{ meItem.title }}</div>
                                  </div>
                                  <i class="el-icon-edit-outline cursor" @click="handlerEdit(meItem,meIndex,index)"></i>
                                </div>
                                </draggable>
                              </div>
                              <el-button class="add-menu" @click="addMenuClick">新增菜单</el-button>
                            </el-form-item>
                          </el-form>
                        </template>
                        <!--关于系统-->
                        <template v-if="item.dataField.key === 'level'">
                          <div class="menu-items">
                            <draggable :list="item.dataField.item">
                              <div v-for="(meItem,meIndex) in item.dataField.item" :key="meIndex" class="dis al_item dis_ju_spb menu-item">
                                <div class="dis al_item">
                                  <el-checkbox :disabled="meItem.disabled" v-model="meItem.isShow"></el-checkbox>
                                  <div class="flex_1">{{ meItem.title }}</div>
                                </div>
                                <i class="el-icon-edit-outline cursor" @click="handlerEdit(meItem,meIndex,index)"></i>
                              </div>
                            </draggable>
                          </div>
                        </template>
                      </div>
                    </div>
                  </draggable>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <div class="wrapper-save">
      <el-button :loading="isSaving" :disabled="isSaving" size="mini"  type="primary"  @click="save">保存</el-button>
    </div>
    <el-dialog
      title="新增菜单"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <el-form ref="addMenu" :model="addNewMenu" label-width="80px">
        <el-form-item class="person-center-form-item" label="菜单名称" prop="title" :rules="[
      { required: true, message: '请输入菜单名称', trigger: 'blur' },
    ]"
        >
          <el-input show-word-limit size="mini" maxlength="10" v-model="addNewMenu.title"></el-input>
        </el-form-item>
        <el-form-item class="person-center-form-item" label="菜单图片">
          <div>
            <el-radio-group v-model="addNewMenu.icon.style">
              <el-radio label="1">系统图标</el-radio>
              <!-- <el-radio label="2">自定义图标</el-radio> -->
            </el-radio-group>
          </div>
          <div class="dis al_item">
           <!-- <div class="image-box min" :style="{backgroundImage: `url(${''})`}" ></div> -->
           <div v-if="addNewMenu.icon.url" class="image-box min" @click="iconClick">
              <svg class="icon-size" aria-hidden="true">
                <use :xlink:href=addNewMenu.icon.url></use>
              </svg>
            </div>
            <el-button v-else @click="iconClick">选择图片</el-button>
          </div>
          <div class="color-9797A1">建议尺寸100px*100px</div>
        </el-form-item>
        <el-form-item class="person-center-form-item" label="菜单链接">
          <div>
            <el-radio-group v-model="addNewMenu.url.style" disabled>
              <el-radio label="1">系统链接</el-radio>
              <el-radio label="2">自定义链接</el-radio>
            </el-radio-group>
          </div>
          <div v-if="addNewMenu.url.style === '1'" class="icon-link">
            <span class="typeName" v-show="addNewMenu.url.microTitle">{{addNewMenu.url.microTitle}}</span>
            <span class="microTitle" v-show="addNewMenu.url.title">{{addNewMenu.url.title}}</span>
            <el-button  @click="choosePage('','','',)">{{addNewMenu.url.microTitle?'修改链接':'选择链接'}}</el-button>
          </div>
          <div style="margin-top:10px" v-if="addNewMenu.url.style === '2'">
            <el-input size="mini" placeholder="请填写需要跳转的H5链接"
                      v-model="addNewMenu.url.h5"
            >
              <span slot="prepend">H5链接:</span>
            </el-input>

            <el-input size="mini" placeholder="请填写小程序AppID"
                      v-model="addNewMenu.url.appId"
            >
              <span slot="prepend">AppID:</span>
            </el-input>
            <el-input size="mini" placeholder="请填写小程序页面路径"
                      v-model="addNewMenu.url.pagePath"
            >
              <span slot="prepend">路径:</span>
            </el-input>
            <div class="color-9797A1">H5链接将在微信公众号及非微信环境的渠道中生效，AppID小程序仅在微信小程序中生效</div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handlePushMenu">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title=""
      :show-close="false"
      :visible.sync="dialogEdit"
      width="500px"
    >
      <el-form ref="addMenu" :model="currentItem.info" label-width="80px">
        <el-form-item class="person-center-form-item" label="名称" prop="title" :rules="[
      { required: true, message: '请输入名称', trigger: 'blur' },
    ]"
        >
          <el-input show-word-limit size="mini" maxlength="10" v-model="currentItem.info.title"></el-input>
        </el-form-item>
        <el-form-item v-if="currentItem.info.icon" class="person-center-form-item" label="菜单图片">
          <div>
            <el-radio-group v-model="currentItem.info.icon.type">
              <el-radio :label="1">系统图标</el-radio>
              <!-- <el-radio :label="2">自定义图标</el-radio> -->
            </el-radio-group>
          </div>
          <div v-if="isIcon" class="dis al_item dis dis_ju al_item edit-box-icon" @click="ImgClick">
            <el-image  :src="currentItem.info.icon.url" fit="fill" style="width: 48px; height: 48px"></el-image>
          </div>
          <div v-else class="dis al_item dis dis_ju al_item edit-box-icon" @click="iconClick">
            <svg class="icon-size" aria-hidden="true">
              <use :xlink:href=currentItem.info.icon.url></use>
            </svg>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEdit = false">取 消</el-button>
        <el-button type="primary" @click="handlerSave">确 定</el-button>
      </span>
    </el-dialog>
    <chooseImages  ref="pics" :can-choose-images-num="canChooseImagesNum" :max="canChooseImagesNum" @chooseImagesEnd="chooseImagesEnd" @getUrl="getPicsUrl" />

    <!--选择微页面-->
    <div id="dialog">
      <el-dialog title="页面选择"
        custom-class="up-dialog"
        :close-on-click-modal="false"
        top="5vh"
        :visible.sync="dialogChoosePages"
        width="42%"
      >
        <div class="choose-goods-compent">
          <choose-feature ref="feature" />
          <div slot="footer" style="text-align: right;margin-top: 20px;">
            <el-button size="mini" type="primary" @click="confirmClick">确定</el-button>
            <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 选择图标 -->
    <el-dialog title="选择图标" :visible.sync="isDialogIcon" width="50%">
      <iconFont @iconBox="iconBox" v-if="isICon" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogIcon = false">取 消</el-button>
        <el-button type="primary" @click="iconChooseModel">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import Index from './index'

export default Index
</script>
<style lang="scss">
  .icon-size {
    height: 20px;
    width: 20px;
  }
.el-form .el-form-item {
  &.person-center-form-item {
    margin-bottom: 16px !important;
  }
}

.person-center-form-item {
  font-size: 12px;

  .el-form-item__label, .el-form-item__content, .el-radio__label, .el-button, .el-checkbox .el-checkbox__label {
    font-size: 12px;
  }
}

</style>

<style lang="scss" scoped>
@import "index";
</style>
